<template>
  <div class="reset-box">
    <van-nav-bar
      title="更改支付密码"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
      :class="[iosFlag]"
    />
    <div class="login-title">
      <p>OBT</p>
      <span>下应用，看精华，尽在OBT</span>
    </div>
    <div class="field-container">
      <van-field
        class="box-input"
        v-model.lazy="passwordModel"
        autofocus
        type="password"
        placeholder="请输入支付密码"
      />
      <van-field
        class="box-input"
        v-model.lazy="passwordcheckModel"
        type="password"
        placeholder="确认支付密码"
      />
      <van-field
        class="box-input"
        v-model="phoneCode"
        type="text"
        placeholder="输入验证码"
      >
        <van-button
          @click="getvalidCode"
          slot="button"
          size="small"
          class="code-btn"
        >获取验证码</van-button>
      </van-field>
      <span class="tip-text" style="width:100%;float;left">
        <span v-if="passwordcheckModel">{{passwordCheckValidate.errorText}}</span>
      </span>

    </div>
    <div style="clear:both;height:10px;"></div>
    <van-button
      @click="onSavePassword"
      type="primary"
      size="large"
      class="button-save"
    >保存</van-button>
  </div>
</template>

<script>
  import { NavBar, Button, Field, Cell, CellGroup, Toast } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Button.name]: Button,
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Toast.name]: Toast,
    },
    data() {
      return {
        passwordModel: "",
        passwordcheckModel: "",
        buttonCanRun: false,
        iosFlag:null,
        phoneCode:"",
        userphone:""
      }
    },
    mounted() {
      this.buttonClass(false, false);
      this.ismobile(1);
    },
    methods: {
      onClickLeft() {
        this.$router.push('/passwordreset');
      },
      getvalidCode(){
        var phoneNum = "";
        if(JSON.parse(sessionStorage.getItem("usermessage"))){
          phoneNum = JSON.parse(sessionStorage.getItem("usermessage")).user.mobile;
        }
        this.userphone = phoneNum;
        if(phoneNum){
          this.$axios({
            method: "POST",
            data: {
              mobile: phoneNum
            },
            url: url_g+"/verify/sms/"
          }).then((res) => {
            Toast('已发送');
          }).catch((e)=>{
            this.toast =  Toast('您输入的信息有误或网络有问题，请检查重试！');
          })
        }else{
          this.toast = Toast('请输入正确的手机号');
        }
      },
      buttonClass(text, isButtonCanRun) {
        let btn = document.querySelector(".button-save");
        if(!text && isButtonCanRun) {
          //按钮可点
          // btn.removeAttribute("disabled");
          btn.disabled = false;
        }else{
          //按钮不可点
          btn.disabled = true;
        }
      },
      onSavePassword() {
        var userMessage = JSON.parse(sessionStorage.getItem("usermessage"));
        if(userMessage){
          token_g = userMessage.token;
        }
        var $thisPassword = this.passwordModel;
        this.$axios({
          method: "POST",
          data: {
            password: this.passwordModel,
            mobile: this.userphone,
            code: this.phoneCode
          },
          url: url_g+'/resetpaypassword/',
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res.data) {
            sessionStorage.setItem('password',$thisPassword);
            Toast.success('修改支付密码成功');
            this.$router.go(-1);
          }
        }).catch((e)=>{

        })
      },
      //移动端适配-首页顶部标题栏
      ismobile(test){
        var u = navigator.userAgent, app = navigator.appVersion;
        if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
          if(window.location.href.indexOf("?mobile")<0){
            try{
              if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                //this.iosFlag = 'ddisplay';
                document.getElementsByClassName("van-tabbar")[0].style = {};
                document.getElementsByClassName("van-tabbar")[0].style.display = "none";
                this.iosFlag = ' ';
              }else{
                this.iosFlag = ' ';
              }
            }catch(e){
            }
          }
        }else if( u.indexOf('iPad') > -1){
          //this.iosFlag = 'ddisplay';
          document.getElementsByClassName("van-tabbar")[0].style = {};
          document.getElementsByClassName("van-tabbar")[0].style.display = "none";
        }else{
          this.iosFlag = ' ';
        }
      },
      andOrIos() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid
      }
    },
    computed: {
      passwordCheckValidate: function() {
        let errorText = "";
        if(!/^.{6,20}$/.test(this.passwordcheckModel)) {
          errorText = '密码长度不符合要求,最小长度为6,最大程度为20'
        } else if (this.passwordcheckModel !== this.passwordModel ){
          errorText = '两次密码不一致';
        } else if (/\s+/.test(this.passwordcheckModel)) {
          errorText = '密码里面不允许包含空格'
        }
        else {
            errorText = '';
        }
        if(!errorText) {
            this.buttonCanRun = true;
        }
        this.$options.methods.buttonClass.bind(this)(errorText, this.buttonCanRun);
        return {
          errorText
        }
      }
    }
  }
</script>

<style scoped="scoped">
.reset-box {
  height: 100vh;
  background: -moz-linear-gradient( top,#028aed,#273eec);
  background: -webkit-linear-gradient( top,#028aed,#273eec);
}
.login-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.login-title p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  line-height: 60px;
}
.login-title span {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}
.box-input {
  color: #fff;
  background-color: transparent;
}
.field-container{
  padding:0 12px;
}
.nav-bar{
  margin-bottom:24px;
}
.tip-text{
  display: block;
  /*width:97px;*/
  height:18px;
  font-size:13px;
  font-family:PingFangSC-Regular;
  color:#F10213;
  line-height:18px;
  margin-top: 14px;
}
/*button {
  display: block;
  width: calc(100% - 24px);
  height: 49px;
  background-color: #025596;
  border: 0;
  border-radius: 4px;
  margin: auto;
  margin-top: 54px;
  font-size:15px;
  line-height: 21px;
  color: #fff;
}*/
button:disabled {
  color: #fff;
  background-color: #81AACB;
}
.ddisplay{
  display: none;
}
.button-save {
  display: block;
  margin: 0 auto;
  width: calc(100% - 24px);
}
.code-btn {
  background-color: transparent;
  font-size: 12px;
  float: right;
  border: 1px solid #fff;
  color: #fff;
}
</style>
